<template>
  <div class="background">
    <div class="return" @click="back">
      <img class="backImg" src="@/assets/images/back.png" alt />
    </div>
    <el-card class="box-card">
      <div style="text-align: right;">
        <el-button class="mb10" type="primary" size="mini" round @click="openDialog('编辑资料')">编辑资料</el-button>
      </div>
      <div class="customer_info" style="">
        <el-row>
          <el-col :span="3">
            <img src="../../assets/admin.png" alt="" style="width: 120px;height: 120px;">
          </el-col>
          <el-col :span="21">
            <el-row>
              <el-col :span="6">
                客户姓名：{{ cliDel.customer_name || '无'}}
              </el-col>
              <el-col :span="6">
                累计消费：{{ cliDel.all_money || '无'}}
              </el-col>
              <el-col :span="6">
                归属医生：{{ cliDel.doctor_name || '无'}}
              </el-col>
              <el-col :span="6">
                备注：{{ cliDel.remarks || '无' }}
              </el-col>
            </el-row>
                <el-row>
              <el-col :span="6">
                手机号：{{ cliDel.telephone || '无'}}
              </el-col>
              <el-col :span="6">
                客户类型：{{ cliDel.repair_progress_name || '无'}}
              </el-col>
              <el-col :span="6">
                归属护士：{{ cliDel.nurse_name || '无'}}
              </el-col>
              <el-col :span="6">
                最近到院：{{ cliDel.last_time || '无'}}
              </el-col>
            </el-row>
                <el-row>
              <el-col :span="6">
                归属门店：{{ cliDel.shop_name || '无'}}
              </el-col>
              <el-col :span="6">
                会员等级：{{ cliDel.membership_leve_name || '无'}}
              </el-col>
              <el-col :span="6">
                归属客服：{{ cliDel.operator || '无'}}
              </el-col>
              <el-col :span="6">
                建档时间：{{ cliDel.create_time ? cliDel.create_time.split(' ')[0] : "无"  }}
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        </div>
    </el-card>
    <el-tabs  type="card"  v-model="activeName">

      <el-tab-pane label="基础信息" name="first"  v-if="oldId == id">
        <detailMsg v-if="activeName=='first' && id " :clienId="id + ''" :detail="cliDel" @clientDetail="clientDetails" ref="detailMsg"/>
      </el-tab-pane>
      <el-tab-pane label="消费信息" name="sixth"  v-if="oldId == id">
        <assetMessage v-if="activeName=='sixth' && id " :clienId="id + ''"  :detail="cliDel"/>
        <!-- <serveRecord v-if="activeName=='sixth' && id " :clienId="id + ''" :detail="cliDel"/> -->
      </el-tab-pane>
      <el-tab-pane label="病例记录" name="fourteen" v-if="oldId == id">
        <medicalCase  v-if="activeName=='fourteen'"  :clienId="id + ''" :detail ="cliDel"/>
      </el-tab-pane>
      <el-tab-pane label="回访记录" name="eighth" v-if="oldId == id">
        <visitAnswer  v-if="activeName=='eighth'" :clienId="id + ''" :consignee="cliDel.customer_name"/>
      </el-tab-pane>
       <el-tab-pane label="订单记录" name="second" v-if="oldId == id">
        <orderRecord  v-if="activeName=='second'" :clienId="id + ''" :detail ="cliDel"/>
      </el-tab-pane>
      <!-- <el-tab-pane label="收款记录" name="second" v-if="oldId == id">
         <gathering v-if="activeName=='second' && id " :clienId="id + ''" :detail ="cliDel"/>
      </el-tab-pane>
      <el-tab-pane label="销售记录" name="thirdly" v-if="oldId == id">
         <sellRecord v-if="activeName=='thirdly' && id " :clienId="id + ''"  :detail="cliDel"/>
      </el-tab-pane>
       <el-tab-pane label="退款列表" name="fourth" v-if="oldId == id">
         <refundList v-if="activeName=='fourth' && id " :clienId="id + ''" :detail ="cliDel"/>
      </el-tab-pane>
       <el-tab-pane label="退货列表" name="fifth" v-if="oldId == id">
         <refundGoods v-if="activeName=='fifth' && id " :clienId="id + ''" :detail ="cliDel"/>
      </el-tab-pane>
      <el-tab-pane label="预存货" name="thirteen" >
      <prestockList   v-if="activeName=='thirteen' && id " :clienId="id + ''" :consignee="cliDel.customer_name"/>
      </el-tab-pane> -->
      <!-- <el-tab-pane label="服务卡项" name="sixth">
        <serveRecord v-if="activeName=='sixth' && id " :clienId="id + ''" :detail="cliDel"/>
      </el-tab-pane>
      <el-tab-pane label="优惠券" name="seventh" v-if="oldId == id">
        <cardList v-if="activeName=='seventh' && id " :clienId="id + ''" :detail="cliDel"/>
      </el-tab-pane> -->
   
      <el-tab-pane label="划扣记录" name="seventh" v-if="oldId == id">
        <serveContent  v-if="activeName=='seventh' && id " :clienId="id + ''"  :detail="cliDel"/>
      </el-tab-pane>
      <!-- <el-tab-pane label="客保记录" name="ninth" v-if="oldId == id">
        <newList  v-if="activeName=='ninth' && id " :detail="cliDel" :clienId="id + ''" />
      </el-tab-pane> -->
      <el-tab-pane label="优案记录" name="tenth">
        <caseList  v-if="activeName=='tenth' && id " :detail="cliDel" :clienId="id + ''" />
      </el-tab-pane>
      <el-tab-pane label="日志记录" name="eleventh">
        <customerRecord v-if="activeName=='eleventh' && id "  :clienId="id + ''" :detail="cliDel" />
      </el-tab-pane>
      <!-- <el-tab-pane label="治疗方案" name="twelfth" v-if="isMedical">
        <healPlan   v-if="activeName=='twelfth' && id " :clienId="id + ''" :consignee="cliDel.customer_name"/>
      </el-tab-pane>
      <el-tab-pane label="修复方案" name="eleventh" v-else>
        <repairPlan   v-if="activeName=='eleventh' && id " :clienId="id + ''" :consignee="cliDel.customer_name"/>
      </el-tab-pane>
     -->
    </el-tabs>
  </div>
</template>

<script>
import detailMsg from './components/detailMsg.vue'
import serveContent from '../serve/serveContent.vue'
import customerRecord from './components/customerRecord.vue'
import orderRecord from './orderList.vue'
import medicalCase from './medicalCase/index.vue'
import serveRecord from '../serve/serveList.vue'
import cardList from './AssetMessage/couponList.vue'
import gathering from '../order/proceedsList.vue'
import sellRecord from '../order/orderList.vue'
import refundList from '../order/refundList.vue'
import refundGoods from '../order/refundGoods.vue'
import visitAnswer from './visitAnswer/index.vue'
import assetMessage from './AssetMessage/index.vue'
import newList from '../againVisit/newList.vue'
import caseList from '../case/caseList.vue'
import repairPlan from './repairPlan.vue'
import prestockList from './prestockList.vue'
import healPlan from './healPlan.vue'
import { clientDetail,readCustomerId } from "@/api/client";
import { ref } from 'vue';
import { mapGetters } from "vuex";

export default {
  
  name: 'ClientDetail',
  components: {
    detailMsg,
    customerRecord,
    serveRecord,
    assetMessage,
    cardList,
    sellRecord,
    gathering,
    refundList,
    refundGoods,
    visitAnswer,
    newList,
    caseList,
    repairPlan,
    healPlan,
    prestockList,
    medicalCase,
    serveContent,
    orderRecord
  },
  
  data () {
    return {
      activeName:'first',
      customer_name:'',
      oldId:"",
      id:"",
      cliDel:{},
      pageName:'',
      value1: false,
      ids:[],
      loading:true,
      medicalShop:[73782774881835,73782774991693,73782775085647,73782775131388,73782775206631,73782775392774,73782775377728],
      isMedical:false,
    }
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  mounted () {
    this.oldId = this.$route.query.id.toString()
    this.id = this.$route.query.id.toString()
    this.activeName = this.$route.query.activeName;
    console.log(this.id,this.activeName,"is")

    this.pageName = this.$route.query.pageName;
    this.getDetail()
    this.readCustomerId()
  },
  methods: {
    
    // 操作
    openDialog(type) {
      const query = { clienId: this.$route.query.id };
      switch (type) {
        case "编辑资料":
          this.$router.push({ name: "客户信息", query });
          break;
      }
    },
    // 获取详情
    getDetail() {
      clientDetail({ id: this.$route.query.id }).then(res => {
        this.cliDel = res

        let medicalShop = this.medicalShop;

        this.isMedical  = medicalShop.includes(res.shop_id);
        this.value1 = medicalShop.includes(res.shop_id);
      });
    },
    // 获取同手机号账户
    readCustomerId(){
      readCustomerId({ id: this.id }).then(res => {
        // console.log(res);
        this.ids = res;
      });
    },
    // 参数
      clientDetails(del){
        this.cliDel = del
      },
      // 返回
    back() {
      console.log('1111111')
        // const query = { search: this.$route.query.search,page:this.$route.query.page}
        // this.$router.push({ name: this.$route.query.pageName,query});
        this.$router.push({name:'客户列表'})
      
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__header{
  background: #fff!important;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
::v-deep .el-tabs__item{
  font-size: 16px ;
}
::v-deep .el-tabs__item.is-active{
  background:#33bea7;
  color: #fff;
}
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav{
  border: none;
}
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item {
  border: 1px solid #E4E7ED;
  margin-right: 30px;
}
// .background{
//   background: #F9F9F9;
// }
.box-card{
  margin-bottom: 20px ;
  .customer_info{
    font-size: 16px;color: #606266;
    line-height: 36px;
  }
}

.return {
  position: fixed;
  right: 20px;
  top: 71px;
  z-index: 999;
  .backImg {
    margin-right: 14px;
    width: 32px;
    height: 100%;
    cursor: pointer;
    vertical-align: middle;
  }
}
.switch{
  width: 100%;
  height: 40px;
  z-index: 999;
}
</style>
